<template>
  <div class="apply">
    <div class="d-flex justify-content-between">
      <div>
        <div class="leftBar d-flex">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="院系">
              <el-select :disabled="searchForm.collegeName !== undefined" v-model="searchForm.collegeName"
                         placeholder="请选择院系">
                <el-option
                    v-for="item in collegeData"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="GetContestInfo">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="mb-2">
          <el-radio-group v-model="searchForm.radio" @change="GetContestInfo">
            <el-radio :label="3" border>全部</el-radio>
            <el-radio :label="0" t border>未开始</el-radio>
            <el-radio :label="1" border>进行中</el-radio>
            <el-radio :label="2" border>已结束</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="rightBar">
        <el-dialog

            title="发布竞赛"
            :visible.sync="dialogVisiblePush"
            width="50%">
          <pushForm ref="pushForm"></pushForm>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisiblePush = false">取 消</el-button>
              <el-button type="primary" @click="insertIntoOk">确 定</el-button>
          </span>
        </el-dialog>
        <el-button @click="insertInto" type="primary" icon="el-icon-plus" circle></el-button>
        <el-popover
            placement="top"
            width="160"
            class="ms-2"
            v-model="visible">
          <p>确定全部删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="handleClickDel(undefined)">确定</el-button>
          </div>
          <el-button slot="reference" type="danger" icon="el-icon-delete" data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="全部删除" circle></el-button>
        </el-popover>
      </div>
    </div>

    <div class="applyBody">
      <el-table
          ref="singleTable"
          :data="applyData"
          highlight-current-row
          :header-cell-style="{'text-align':'center'}"
          :cell-style="cellStyle"
          border
          style="width: 100%;background-color: white">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="竞赛内容：">
                <el-input
                    type="textarea"
                    :rows="5"
                    v-model="JSON.parse(props.row.content).text">
                </el-input>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            property="name"
            label="竞赛名称"
            width="120"
            :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            property="raceType"
            label="竞赛类型"
            width="130"
        >
          <template slot-scope="scope">
            {{ scope.row.raceType|raceType }}
          </template>
        </el-table-column>
        <el-table-column
            label="竞赛内容"
            :show-overflow-tooltip="true"
            width="130">
          <template slot-scope="scope">
            <span class="contentImg" @click="downloadFile(scope.row.content)">
               <i class="iconfont icon-word"></i><br/>
               <span>{{ content(scope.row.content) }}</span>
            </span>
          </template>
        </el-table-column>

        <el-table-column
            label="状态"
            width="130">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status===1?'primary':scope.row.status===0?'info':'danger'">{{
                scope.row.status === 1 ? '进行中' : scope.row.status === 0 ? '未开始' : '已结束'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            property="userName"
            label="负责人"
            width="130">
        </el-table-column>
        <el-table-column
            property="organizer"
            label="举办单位"
            width="130"
            :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.organizer|addr }}
          </template>
        </el-table-column>
        <el-table-column

            label="开始时间"
            width="130">
          <template slot-scope="scope">
            {{ scope.row.startDate|time }}
          </template>
        </el-table-column>
        <el-table-column
            label="截止时间"
            width="130">
          <template slot-scope="scope">
            {{ scope.row.endDate|time }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" class="m-1" size="mini" @click="handleClickStatus(scope.row)">设置</el-button>
            <el-button type="danger" class="m-1" size="mini" @click="openDelDialog(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt-3"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisibleDel"
        width="30%">
      <span>确定删除该数据吗？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDel = false">取 消</el-button>
    <el-button type="primary" @click="handleClickDel">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="设置竞赛状态"
        :visible.sync="dialogVisibleStatus"
        width="30%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="竞赛状态">
          <el-select v-model="searchForm.status">
            <el-option label="未开始" :value="0"></el-option>
            <el-option label="进行中" :value="1"></el-option>
            <el-option label="已结束" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleStatus = false">取 消</el-button>
    <el-button type="primary" @click="UpdateStatus">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import pushForm from "../../../components/adminComponents/pushForm";
import admin from "../../../api/admin";
import raceType from "../../../filter/raceType";
import addr from "../../../filter/addr";
import time from "../../../filter/time";
import init from "../../../api/init";

export default {
  name: "contestPush",
  data() {
    return {
      limit: 5,
      skip: 0,
      page: 1,
      size: 5,
      total: 1,
      visible: false,
      dialogVisibleDel: false,
      applyData: [],
      searchForm: {
        radio: 3,
        status: '',
        collegeName: this.$store.getters["userStore/userInfo"].role.includes('SuperAdmin') ? undefined : this.$store.getters["userStore/userInfo"].collegeName,
      },
      collegeData: init.college,
      dialogVisiblePush: false,
      delId: '',
      dialogVisibleStatus: false
    }
  },
  filters: {
    raceType,
    addr,
    time
  },
  mounted() {
    this.GetContestInfo()
  },
  components: {
    pushForm
  },

  methods: {

    handleClickStatus(row) {
      this.dialogVisibleStatus = true
      this.delId = row._id
      this.searchForm.status = row.status
    },

    UpdateStatus() {
      // loading加载框
      const loading = this.$loading({
        lock: true,
        text: '正在设置...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      admin.UpdateContestStatus({id: this.delId, status: this.searchForm.status}).then(r => {
        if (r.data.status === '200') {
          this.$message({
            showClose: true,
            message: '设置成功',
            type: 'success',
          });
          loading.close();
          this.GetContestInfo()
        }
      }).catch(() => {
        loading.close();
        this.$message({
          showClose: true,
          message: '设置失败',
          type: 'error'
        });
      })
    },

    openDelDialog(id) {
      this.dialogVisibleDel = true
      this.delId = id
    },


    handleSizeChange(size) {
      this.size = size
      this.limit = size
      this.GetContestInfo()
    },
    handleCurrentChange(size) {
      this.page = size
      this.GetContestInfo()
    },
    GetContestInfo() {
      const param = {
        collegeName: this.searchForm.collegeName,
        limit: this.limit,
        skip: (this.page - 1) * this.size,
        status: this.searchForm.radio === 3 ? 'undefined' : this.searchForm.radio
      }
      admin.GetContestInfo(param).then(r => {
        this.applyData = r.data.data.con
        this.total = r.data.data.count
        console.log(r.data.data.con)
      })
    },
    // 删除
    handleClickDel() {
      this.visible = false
      // loading加载框
      const loading = this.$loading({
        lock: true,
        text: '删除中请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      admin.DelContentById({id: this.delId}).then(r => {
        loading.close();
        if (r.data.status === '200') {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
          });
          this.GetContestInfo()
        } else {
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'error'
        });
      })
    },
    // 名称过滤
    content(row) {
      const param = JSON.parse(row)
      return param.name.slice(13)
    },
    cellStyle() {
      return {
        'text-align': 'center',
        'overflow': 'hidden',
        'text-overflow': 'ellipsis',
        'white-space': 'nowrap',
      }
    },
    // 发布按钮
    insertInto() {
      this.dialogVisiblePush = true
    },
    // 确认发布按钮
    insertIntoOk() {
      this.$refs.pushForm.confirm()
    },
    // 下载文件
    downloadFile(obj) {
      const a = document.createElement("a");
      a.setAttribute("href", "http://127.0.0.1/Admin/DownloadFile?fileInfo=" + obj);
      let clickEvent = document.createEvent("MouseEvents");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
    }
  }
}
</script>

<style scoped>
.layout {
  display: flex;
  justify-content: space-between;
}

.leftBar {
  display: flex;
  align-items: center;
}

.icon-word {
  font-size: 32px;
  color: #54a0ff;
}

.contentImg {
  cursor: pointer;
}

/deep/ .el-table .cell {
  /*line-height: 77px;*/
}
</style>